<script setup lang="ts">
	import type { HotItem } from "@/types/home";
	import { ref } from "vue"
defineProps<{
	list : HotItem[]
}>()
</script>

<template>
	<view class="panel hot">
		<view class="item" v-for="item in list" :key="item">
			<view class="title">
				<text class="title-text">{{item.title}}

				</text>
				<text class="title-desc">{{item.alt}}</text>
			</view>
<navigator :url="`/pages/hot/hot?type=${item.type}`" class="cards">
	<image v-for="item1 in item.pictures" :src="item1" mode="aspectFit" class="image"></image>
	 
</navigator>
		</view>

	</view>
</template>


<style>
	.hot{
		display: flex;
		flex-wrap: wrap;
		min-height: 508rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.title{
		display: flex;
		align-items: center;
		padding: 24rpx 24rpx 0;
		font-size: 32rpx;
		color: #262626;
		position: relative;
	}
	.title-desc{
		font-size: 24rpx;
		color: #f7f7f7;
		margin-left: 18rpx;
	}
	.item{
		display: flex;
		flex-direction: column;
		width: 50%;
		height: 254rpx;
		border-right: 1px solid #eee;
		border-top: 1px solid #eee;
	}
	.item .title{
		justify-content: start;
	}
	.item .title:nth-child(2n){
		border-right: 0 none;
	}
	.item .title:nth-child(-n + 2){
		border-top: 0 none;
	}
	.image{
		width: 150rpx;
		height: 150rpx;
	}
	.cards{
		flex: 1;
		padding: 15rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>